import React, { Component } from 'react'
import { connect } from 'dva';
import {
  Modal,
  Toast,
  Flex,
  Button,
  List,
  Checkbox,
  InputItem,
  Picker
} from 'antd-mobile';

import NavTopBar from '../../components/NavTopBar/NavTopBar';
import MyScroll from '../../components/MyScroll/MyScroll';
import { createForm } from 'rc-form';
import getAreaData from './areaData';
const  areaData= getAreaData();
import { add_address, save_btn } from './addressAdd.less';

const Item = List.Item;


class AddressAdd extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {

  }

  onPickerChange = (value) => {
    //console.log(value);
  }

  onSubmit = () => {

          const fieldsValue = this.props.form.getFieldsValue();
          // check
          if (!fieldsValue.trueName || fieldsValue.trueName == '') {
              Toast.info('收货人姓名不能为空');
              return;
          }
          if (!fieldsValue.mobPhone || fieldsValue.mobPhone.trim() == '') {
              Toast.info('手机号不能为空');
              return;
          }

          // 无法判断17  开头的电话号！
          // if (!/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/.test(fieldsValue.mobPhone.replace(/\s/g,''))) {
          //     Toast.info('手机号格式不正确');
          //     return;
          // }


          if (!fieldsValue.areaInfo || fieldsValue.areaInfo.length == 0) {
              Toast.info('请选择所在地区');
              return;
          }
          if (!fieldsValue.address || fieldsValue.address == '') {
              Toast.info('详细地址不能为空');
              return;
          }

          const provinceId = fieldsValue.areaInfo[0];
          const cityId = fieldsValue.areaInfo[1];
          const areaId = fieldsValue.areaInfo[2];

          const currentProvince = (areaData.filter(item => item.value == provinceId))[0];
          const currentCity = (currentProvince.children.filter(item => item.value == cityId))[0];
          const currentArea = (currentCity.children.filter(item => item.value == areaId))[0];
          const currentAreaName = [currentProvince.label, currentCity.label, currentArea.label].join(',');

          console.log(fieldsValue,currentAreaName);

          let address = {
              trueName:fieldsValue.trueName,
              mobPhone:fieldsValue.mobPhone.replace(/\s/g,''),
              address:fieldsValue.address,
              areaInfo:currentAreaName,
              areaId:fieldsValue.areaInfo[2],
              cityId:fieldsValue.areaInfo[1],
              provinceId:fieldsValue.areaInfo[0],
          };
          this.props.dispatch({ type:'orderAddress/saveAddressEFF', obj:address } )
  }

  render() {
    const { dispatch } = this.props;
    const { getFieldProps } = this.props.form;


      //console.log(JSON.stringify(convertedData));

    return (
        <Flex style={{
            height:"100%"
        }} direction="column"
            // className={addressList}
        >
            <NavTopBar dispatch={dispatch} title="新增收货地址"/>
            <MyScroll>
                <div className={add_address}>
                    <List className="picker-list">
                        <InputItem
                            {...getFieldProps('trueName')}
                            clear
                            placeholder="请输入收货人"
                        >收货人:</InputItem>
                        <InputItem
                            {...getFieldProps('mobPhone')}
                            clear
                            type='phone'
                            placeholder="请输入手机号"
                        >手机号:</InputItem>
                        {/*<InputItem*/}
                        {/*{...getFieldProps('zipCode')}*/}
                        {/*clear*/}
                        {/*type='number'*/}
                        {/*placeholder="请输入邮政编码">邮政编码</InputItem>*/}
                        <Picker
                            data={areaData}
                            title="选择地区"
                            onPickerChange={this.onPickerChange}
                            {...getFieldProps('areaInfo')}
                        >
                            <List.Item arrow="horizontal">所在地区:</List.Item>
                        </Picker>
                        <InputItem
                                   {...getFieldProps('address')}
                                   clear
                                   placeholder="详细地址">详细地址:</InputItem>

                    </List>
                </div>
            </MyScroll>

            <Button className={save_btn} onClick={this.onSubmit} type='primary'>保存</Button>
        </Flex>

        )


  }
}



export default connect(({orderAddress})=>({orderAddress}))(createForm()(AddressAdd))
